<script setup lang="ts">
const { waterForm, tableHeaders } = defineProps < {
    waterForm: Object;  // 定义采样时间的类型
    tableHeaders: Array < any >;  // 定义采样时间的类型
    tabler: Array < any >;  // 定义采样时间的类型
} > ();
</script>

<template>
    <div>
        <div v-for="(pageData, pageIndex) in tableHeaders" :key="pageIndex">
            <h1 style="text-align: center;">环境空气和废气 总烃/甲烷/非甲烷总烃分析原始记录（A面）</h1>
            <div>SXLPHJ/JL/CX-22-68</div>
            <table class="table w">
                <tr>
                    <td>任务编号</td>
                    <td colspan="2">
                        {{ waterForm.task_name }}
                    </td>
                    <td>采样日期</td>
                    <td colspan="2">
                        {{ waterForm.sampling_time }}
                    </td>
                    <td colspan="1">分析日期</td>
                    <td colspan="4">
                        {{ waterForm.anal_time }}
                    </td>
                </tr>
                <tr>
                    <td>分析方法</td>
                    <td colspan="5">
                        {{ waterForm.method }}
                    </td>
                    <td colspan="1">检出限</td>
                    <td colspan="4">
                        {{ waterForm.limit_val }}
                    </td>
                </tr>
                <tr>
                    <td>分析仪器</td>
                    <td colspan="2">
                        {{ waterForm.device?.device_name?.join('\n') }}
                    </td>
                    <td colspan="1">仪器型号</td>
                    <td colspan="2">
                        {{ waterForm.device?.device_model?.join('\n') }}
                    </td>
                    <td colspan="1">仪器编号</td>
                    <td colspan="4">
                        {{ waterForm.device?.device_number?.join('\n') }}
                    </td>
                    <!--          选择仪器组件-->
                    <!-- <Device :water-form="waterForm"></Device> -->
                </tr>
                <tr>
                    <td>环境温度</td>
                    <td colspan="2">
                        {{ waterForm.temperature }}
                    </td>
                    <td>环境湿度</td>
                    <td colspan="2">
                        {{ waterForm.humidity }}
                    </td>
                    <td colspan="1">样品类别</td>
                    <td colspan="4">
                        {{ waterForm.category_id }}
                    </td>
                </tr>
                <tr>
                    <td>测定条件</td>
                    <td colspan="10">
                        <div style="display: flex;align-items: center;justify-content: space-around;">
                            <div class="left">
                                测定条件：
                                {{ waterForm.cdtj.cdtj1 }}
                            </div>
                            <div class="right">
                                进样量：
                                {{ waterForm.cdtj.cdtj2 }}
                            </div>
                        </div>

                    </td>
                </tr>
                <tr>
                    <td>计算公式</td>
                    <td colspan="10">
                        {{ waterForm.js_formula }}
                    </td>
                </tr>
            </table>
            <table class="table w">
                <tr>
                    <td v-for="(key, index) in Object.keys(tableHeaders[0][0])" :key="index"
                        :colspan="index > 0 ? 1 : ''">
                        {{ key }}
                    </td>
                </tr>
                <tr v-for="(row, rowIndex) in pageData" :key="rowIndex">
                    <td v-for="(key, colIndex) in Object.keys(row)" :key="colIndex">
                        <div style="height: 25px;display: flex;align-items: center;justify-content: center">
                            {{ row[key] }}
                        </div>
                    </td>
                </tr>
                <tr>
                    <td>备注</td>
                    <td colspan="8">
                        {{ waterForm.bdatas.checkList }}
                    </td>
                </tr>
            </table>
            <div style="display: flex;align-items: center;justify-content: space-between;margin-top: 20px">
                <div>分析人：</div>
                <div>校核人：</div>
                <div>审核人：</div>
                <div>第 {{ pageIndex + 1 }} 页 / 共 {{ tableHeaders.length }} 页</div>
            </div>
        </div>
        <div>
            <h1 style="text-align: center; padding-top: 30px;">环境空气和废气 总烃/甲烷/非甲烷总烃分析原始记录（B面）</h1>
            <div>SXLPHJ/JL/CX-22-68</div>
            <table class="table">
                <tr>
                    <td colspan="2" style="text-align: center;border-right: none;"></td>
                    <td colspan="8"
                        style="text-align: center; border-left: none; border-right: none; font-weight: bold;">标准曲线绘制
                    </td>
                    <td colspan="2" style="text-align: center;border-left: none;">
                        <div style="display: flex;align-items: center">
                            <span style="width: 100px;">绘制日期：</span>
                            {{ waterForm.hzrq }}
                        </div>

                    </td>
                </tr>
                <tr>
                    <td colspan="1">甲烷标准气体编号</td>
                    <td colspan="2">
                        {{ waterForm.bdatas.jwbzqtbh }}
                    </td>
                    <td colspan="2">浓度</td>
                    <td colspan="1">
                        {{ waterForm.bdatas.jwbzqtnd }}
                    </td>
                    <td colspan="1">有效期</td>
                    <td colspan="4">
                        {{ waterForm.bdatas.jwbzqyxq }}
                    </td>
                </tr>
                <tr>
                    <td colspan="1">总烃标准气体编号</td>
                    <td colspan="2">
                        {{ waterForm.bdatas.ztbzqtbh }}
                    </td>
                    <td colspan="2">浓度</td>
                    <td colspan="1">
                        {{ waterForm.bdatas.ztbzqtnd }}
                    </td>
                    <td colspan="1">有效期</td>
                    <td colspan="4">
                        {{ waterForm.bdatas.ztbzqtyxq }}
                    </td>
                </tr>
                <tr>
                    <td colspan="1">稀释气气体编号</td>
                    <td colspan="2">
                        {{ waterForm.bdatas.xsqtbh }}
                    </td>
                    <td colspan="2">浓度</td>
                    <td colspan="1">
                        {{ waterForm.bdatas.xsqtnd }}
                    </td>
                    <td colspan="1">有效期</td>
                    <td colspan="4">
                        {{ waterForm.bdatas.xsqtyxq }}
                    </td>
                </tr>
                <tr>
                    <td colspan="1">配气仪器</td>
                    <td colspan="2">
                        {{ waterForm.bdatas.device_name }}
                    </td>
                    <td colspan="2">仪器型号</td>
                    <td colspan="1">
                        {{ waterForm.bdatas.device_model }}
                    </td>
                    <td colspan="1">仪器编号</td>
                    <td colspan="4">
                        {{ waterForm.bdatas.device_number }}
                    </td>
                </tr>
                <tr>
                    <td colspan="1" rowspan="4">甲烷</td>
                    <td colspan="1">
                        <div>
                            甲烷浓度（{{ waterForm.unit.jw }}）
                        </div>
                    </td>
                    <td colspan="1">
                        {{ waterForm.bdatas.jwnd.jwndOne }}
                    </td>
                    <td colspan="1">
                        {{ waterForm.bdatas.jwnd.jwndTow }}
                    </td>
                    <td colspan="1">
                        {{ waterForm.bdatas.jwnd.jwndThree }}
                    </td>
                    <td colspan="1">
                        {{ waterForm.bdatas.jwnd.jwndFour }}
                    </td>
                    <td colspan="2">
                        {{ waterForm.bdatas.jwnd.jwndFive }}
                    </td>
                    <td colspan="3">
                        {{ waterForm.bdatas.jwnd.jwndSix }}
                    </td>
                </tr>
                <tr>
                    <td colspan="1">出峰时间（min）</td>
                    <td colspan="1">
                        {{ waterForm.bdatas.jwcfsj.jwcfsjOne }}
                    </td>
                    <td colspan="1">
                        {{ waterForm.bdatas.jwcfsj.jwcfsjTow }}
                    </td>
                    <td colspan="1">
                        {{ waterForm.bdatas.jwcfsj.jwcfsjThree }}
                    </td>
                    <td colspan="1">
                        {{ waterForm.bdatas.jwcfsj.jwcfsjFour }}
                    </td>
                    <td colspan="2">
                        {{ waterForm.bdatas.jwcfsj.jwcfsjFive }}
                    </td>
                    <td colspan="3">
                        {{ waterForm.bdatas.jwcfsj.jwcfsjSix }}
                    </td>
                </tr>
                <tr>
                    <td colspan="1">出峰面积（μv.s）</td>
                    <td colspan="1">
                        {{ waterForm.bdatas.jwcfmj.jwcfmjOne }}
                    </td>
                    <td colspan="1">
                        {{ waterForm.bdatas.jwcfmj.jwcfmjTow }}
                    </td>
                    <td colspan="1">
                        {{ waterForm.bdatas.jwcfmj.jwcfmjThree }}
                    </td>
                    <td colspan="1">
                        {{ waterForm.bdatas.jwcfmj.jwcfmjFour }}
                    </td>
                    <td colspan="2">
                        {{ waterForm.bdatas.jwcfmj.jwcfmjFive }}
                    </td>
                    <td colspan="3">
                        {{ waterForm.bdatas.jwcfmj.jwcfmjSix }}
                    </td>
                </tr>
                <tr>
                    <td colspan="1">校准曲线(y=a₁+b₁x)</td>
                    <td colspan="9">
                        <div>
                            <div class="ac" style="display: flex; justify-content: space-around;">
                                <div class="flex ac">
                                    y=
                                    {{ waterForm.bdatas.jwy }}
                                </div>
                                <div class="flex ac">
                                    r₁=
                                    {{ waterForm.bdatas.jwr1 }}
                                </div>
                                <div class="flex ac">
                                    a₁=
                                    {{ waterForm.bdatas.jwa1 }}
                                </div>
                                <div class="flex ac">
                                    b₁=
                                    {{ waterForm.bdatas.jwb1 }}
                                </div>
                            </div>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td colspan="1" rowspan="4">总烃</td>
                    <td colspan="1">
                        <div>
                            总烃浓度（{{ waterForm.unit.zt }}）
                        </div>
                    </td>
                    <td colspan="1">
                        {{ waterForm.bdatas.ztnd.ztndOne }}
                    </td>
                    <td colspan="1">
                        {{ waterForm.bdatas.ztnd.ztndTow }}
                    </td>
                    <td colspan="1">
                        {{ waterForm.bdatas.ztnd.ztndThree }}
                    </td>
                    <td colspan="1">
                        {{ waterForm.bdatas.ztnd.ztndFour }}
                    </td>
                    <td colspan="2">
                        {{ waterForm.bdatas.ztnd.ztndFive }}
                    </td>
                    <td colspan="3">
                        {{ waterForm.bdatas.ztnd.ztndSix }}
                    </td>
                </tr>
                <tr>
                    <td colspan="1">出峰时间（min）</td>
                    <td colspan="1">
                        {{ waterForm.bdatas.ztcfsj.ztcfsjOne }}
                    </td>
                    <td colspan="1">
                        {{ waterForm.bdatas.ztcfsj.ztcfsjTow }}
                    </td>
                    <td colspan="1">
                        {{ waterForm.bdatas.ztcfsj.ztcfsjThree }}
                    </td>
                    <td colspan="1">
                        {{ waterForm.bdatas.ztcfsj.ztcfsjFour }}
                    </td>
                    <td colspan="2">
                        {{ waterForm.bdatas.ztcfsj.ztcfsjFive }}
                    </td>
                    <td colspan="3">
                        {{ waterForm.bdatas.ztcfsj.ztcfsjSix }}
                    </td>
                </tr>
                <tr>
                    <td colspan="1">出峰面积（μv.s）</td>
                    <td colspan="1">
                        {{waterForm.bdatas.ztcfmj.ztcfmjOne}}
                    </td>
                    <td colspan="1">
                        {{waterForm.bdatas.ztcfmj.ztcfmjTow}}
                    </td>
                    <td colspan="1">
                        {{waterForm.bdatas.ztcfmj.ztcfmjThree}}
                    </td>
                    <td colspan="1">
                        {{waterForm.bdatas.ztcfmj.ztcfmjFour}}
                    </td>
                    <td colspan="2">
                        {{ waterForm.bdatas.ztcfmj.ztcfmjFive }}
                    </td>
                    <td colspan="3">
                        {{ waterForm.bdatas.ztcfmj.ztcfmjSix }}
                    </td>
                </tr>
                <tr>
                    <td colspan="1">校准曲线(y=a₂+b₂x)</td>
                    <td colspan="9">
                        <div>
                            <div class="ac" style="display: flex; justify-content: space-around;">
                                <div class="flex ac">
                                    y=
                                    {{ waterForm.bdatas.zty }}
                                </div>
                                <div class="flex ac">
                                    r₁=
                                    {{ waterForm.bdatas.ztr2 }}
                                </div>
                                <div class="flex ac">
                                    a₁=
                                    {{ waterForm.bdatas.zta2 }}
                                </div>
                                <div class="flex ac">
                                    b₁=
                                    {{ waterForm.bdatas.ztb2 }}
                                </div>
                            </div>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td colspan="12" style="text-align: center;font-weight: bold;">曲线校核点测定</td>
                </tr>
                <tr style="text-align: center">
                    <td colspan="2">样品编号</td>
                    <td colspan=" 2">测定结果(mg/m³)</td>
                    <td colspan="2">相对误差（%）</td>
                    <td colspan="3">质控要求</td>
                    <td colspan="3">是否合格</td>
                </tr>
                <tr v-for="(item, index) in waterForm.bdatas.qxjhdcd" :key="index">
                    <td colspan="2">
                        {{ item.qx_ypbh }}
                    </td>
                    <td colspan="2">
                        {{ item.qx_cdjg }}
                    </td>
                    <td colspan="2">
                        {{ item.qx_xd }}
                    </td>
                    <td colspan="3">
                        {{ item.qx_zkyq }}
                    </td>
                    <td colspan="3">
                        {{ item.qx_sfhg }}
                    </td>
                </tr>
                <tr>
                    <td colspan="11" style="text-align: center;font-weight: bold;">空白质控样测定</td>
                </tr>
                <tr style="text-align: center">
                    <td colspan="1">样品编号</td>
                    <td colspan="1">空白值(mg/m³)</td>
                    <td colspan="1">质控指标(mg/m³)</td>
                    <td colspan="1">是否合格</td>
                    <td colspan="1">样品编号</td>
                    <td colspan="1">空白值(mg/m³)</td>
                    <td colspan="2">质控指标(mg/m³)</td>
                    <td colspan="3">是否合格</td>
                </tr>
                <tr v-for="(item, index) in waterForm.kbycd" :key="index">
                    <td colspan="1">
                        {{ item.kb_ypbh }}
                    </td>
                    <td colspan="1">
                        {{ item.kb_kbz }}
                    </td>
                    <td colspan="1">
                        {{ item.kb_zkzb }}
                    </td>
                    <td colspan="1">
                        {{ item.kb_sfhg }}
                    </td>
                    <td colspan="1">
                        {{ item.kb_ypbh1 }}
                    </td>
                    <td colspan="1">
                        {{ item.kb_kbz1 }}
                    </td>
                    <td colspan="2">
                        {{ item.kb_zkzb1 }}
                    </td>
                    <td colspan="3">
                        {{ item.kb_sfhg1 }}
                    </td>
                </tr>

                <tr>
                    <td colspan="11" style="text-align: center;font-weight: bold;">平行样测定</td>
                </tr>
                <tr style="text-align: center">
                    <td colspan="2">平行样编号</td>
                    <td colspan=" 2">
                        <div class="flex ac">
                            <div style="display: flex;align-items: center;width: 50%;">
                                ({{ waterForm.bdatas.pxycd_fx.bt_1 }})
                            </div>
                            与
                            <div style="display: flex;align-items: center;width: 50%;">
                                ({{ waterForm.bdatas.pxycd_fx.bt_2 }})
                            </div>
                        </div>
                    </td>
                    <td colspan="2">
                        <div class="flex ac">
                            <div style="display: flex;align-items: center;width: 50%;">
                                ({{ waterForm.bdatas.pxycd_fx.bt_3 }})
                            </div>
                            与
                            <div style="display: flex;align-items: center;width: 50%;">
                                ({{ waterForm.bdatas.pxycd_fx.bt_4 }})
                            </div>
                        </div>
                    </td>
                    <td colspan="5">
                        <div class="flex ac">
                            <div style="display: flex;align-items: center;width: 50%;">
                                ({{ waterForm.bdatas.pxycd_fx.bt_5 }})
                            </div>
                            与
                            <div style="display: flex;align-items: center;width: 50%;">
                                ({{ waterForm.bdatas.pxycd_fx.bt_6 }})
                            </div>
                        </div>
                    </td>
                </tr>
                <tr style="text-align: center;">
                    <td colspan="2">测定浓度(mg/m3)</td>
                    <td colspan="1">
                        {{ waterForm.bdatas.pxycd_fx.cdnd_1 }}
                    </td>
                    <td colspan="1">
                        {{ waterForm.bdatas.pxycd_fx.cdnd_2 }}
                    </td>
                    <td colspan="1">
                        {{ waterForm.bdatas.pxycd_fx.cdnd_3 }}
                    </td>
                    <td colspan="1">
                        {{ waterForm.bdatas.pxycd_fx.cdnd_4 }}
                    </td>
                    <td colspan="2">
                        {{ waterForm.bdatas.pxycd_fx.cdnd_5 }}
                    </td>
                    <td colspan="3">
                        {{ waterForm.bdatas.pxycd_fx.cdnd_6 }}
                    </td>
                </tr>
                <tr style="text-align: center;">
                    <td colspan="2">平均值(mg/m3)</td>
                    <td colspan="2">
                        {{ waterForm.bdatas.pxycd_fx.pjzOne }}
                    </td>
                    <td colspan="2">
                        {{ waterForm.bdatas.pxycd_fx.pjzTow }}
                    </td>
                    <td colspan="5">
                        {{ waterForm.bdatas.pxycd_fx.pjzThree }}
                    </td>
                </tr>
                <tr style="text-align: center;">
                    <td colspan="2">相对偏差</td>
                    <td colspan="2">
                        {{ waterForm.bdatas.pxycd_fx.xdpcOne }}
                    </td>
                    <td colspan="2">
                        {{ waterForm.bdatas.pxycd_fx.xdpcTow }}
                    </td>
                    <td colspan="5">
                        {{ waterForm.bdatas.pxycd_fx.xdpcThree }}
                    </td>
                </tr>
                <tr style="text-align: center;">
                    <td colspan="2">允许相对偏差</td>
                    <td colspan="2">
                        {{ waterForm.bdatas.pxycd_fx.yxxdpcOne }}
                    </td>
                    <td colspan="2">
                        {{ waterForm.bdatas.pxycd_fx.yxxdpcTow }}
                    </td>
                    <td colspan="5">
                        {{ waterForm.bdatas.pxycd_fx.yxxdpcThree }}
                    </td>
                </tr>
                <tr style="text-align: center;">
                    <td colspan="2">是否合格</td>
                    <td colspan="2">
                        {{ waterForm.bdatas.pxycd_fx.sfhgOne }}
                    </td>
                    <td colspan="2">
                        {{ waterForm.bdatas.pxycd_fx.sfhgTow }}
                    </td>
                    <td colspan="5">
                        {{ waterForm.bdatas.pxycd_fx.sfhgThree }}
                    </td>
                </tr>
                <tr>
                    <td colspan="2">备注</td>
                    <td colspan="9">
                        {{ waterForm.bnotes }}
                    </td>
                </tr>
            </table>
            <div style="display: flex;align-items: center;justify-content: space-between;margin-top: 20px">
                <div>分析人：</div>
                <div>校核人：</div>
                <div>审核人：</div>
                <div>第 {{ tableHeaders.length }} 页 / 共 {{ tableHeaders.length }} 页</div>
            </div>
        </div>
    </div>

</template>
<style scoped>
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* 设置表格的边框、外边距等 */
table {
    border-collapse: collapse;
    width: 100%;
}

table th,
table td {
    border: 1px solid #ddd;
    padding: 2px 10px;
    font-size: 11px;
    text-align: center;
    height: 25px;
}

tr {
    page-break-inside: avoid
}

.fs12 {
    font-size: 12px;
}

.w tr td:nth-child(1) {
    width: 200px !important;
    white-space: nowrap;
}


.table {
    width: 100%;
}

/* 打印时隐藏所有默认的头部和尾部 */
@media print {

    /* 隐藏页眉和页脚 */
    @page {
        margin: 0;
        margin-top: 10px;
    }

    table {
        page-break-inside: avoid;
    }

    tr {
        page-break-inside: avoid;
        page-break-after: auto;
    }

    th,
    td {
        page-break-inside: avoid;
    }

    body {
        margin: 0;
        margin-top: -5px;
        padding: 0;
        zoom: 100%;
    }

    div {
        page-break-inside: avoid;
    }

    /* 禁用打印页脚和页眉 */
    .no-print {
        display: none;
    }

    /* 如果你不想打印特定元素，可以这样设置 */
    header,
    footer,
    nav,
    .no-print {
        display: none !important;
    }

    /* 保证内容区域不受其他元素影响 */
    .content {
        display: block;
    }
}
</style>
